<template>
  <div style="text-align:left">
    <el-transfer v-model="transfer.checkedKeys" :data="transfer.data"></el-transfer>
    <el-row style="text-align: center;padding: 10px;">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'UserRole',
  props: ['user', 'transfer'],
  methods: {
    handleSubmit: function() {
      let body = { userId: this.user.id, roleId: this.transfer.checkedKeys }

      this.$api.saveUserRole(body).then(res =>{
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$emit('success')

      })

    }
  }
}
</script>

<style>
  .el-transfer {
    display: flex!important;
    justify-content: center!important;
  }

  .el-transfer__buttons {
    display: flex!important;
    flex-direction: column!important;
    padding: 0 10px!important;
    justify-content: center!important;
  }

  .el-transfer-panel__body {
    padding-bottom: 36px!important;
    height: 285px!important;
  }
</style>
